<template>
  <view class="loading-container flex-column" :style="{height:`${windowHeight}px`}">
    <view v-if="title" class="title">{{title}}</view>
    <slot></slot>
  </view>
</template>

<script>
  export default {
    props: {
      title: String
    },
    computed: {
      windowHeight() {
        if (this.systemInfo) {
          return this.systemInfo.windowHeight;
        }
        return 0;
      }
    },
    created() {
      this.systemInfo = uni.getSystemInfoSync();
    }
  }
</script>

<style lang="scss">
  .loading-container {
    width: 750rpx;
    justify-content: center;
    align-items: center;
    background-color: white;

    .title {
      font-size: 28rpx;
      color: $uni-text-color-grey;
    }
  }
</style>